<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取表单</title>
    <script src="../lib/jquery.js"></script>
</head>

<body>
    <form action="/login" id="f1">
        name:
        <input type="text" name="name">
        password:
        <input type="password" name="pwd">
        <button type="submit">提交</button>
    </form>
    <script>
            // 第一种方式
      // $('#f1').submit(function (e) {
      //   alert('监听到了表单的提交事件')
      //   e.preventDefault()//阻止默认提交行为
      // })
      //第二种方式
      $("#f1").on("submit",function(e){
          e.preventDefault();
          var data = $(this).serialize();//必须为每个表单元素添加 name 属性
          console.log(data);
      })
    </script>
</body>

</html>